<template>
  <div class="login">
    <el-dialog
      :visible.sync="loginDialogVisible"
      width="25%"
      :before-close="handleClose"
    >
      <div class="forminfo">
          <div class="logo">
              <img src="@/assets/logo.jpg" style="width:150px;height:60px;marginBottom:60px">
          </div>
        <el-form
          :model="loginForm"
          status-icon
          :rules="loginFormRules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item prop="phone">
            <el-input v-model="loginForm.phone" placeholder="请输入网易云帐号登录">
                 <i slot="prefix" class="el-icon-mobile"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="pwd">
            <el-input type="password" v-model="loginForm.pwd" placeholder="请输入密码">
                <i slot="prefix" class="el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-form-item>
          </el-form-item>
           <el-button type="primary" style="width:100%" @click="dialogVisible = false"
          >登录</el-button
        >
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {mapGetters,mapMutations} from 'vuex';
export default {
  data() {
    return {
      loginForm: {
        phone: "",
        pwd: "",
      },
      loginFormRules: {
        phone: [{ required: true, message: "请输入网易帐号", trigger: "blur" }],
        pwd: [{ required: true, message: "请输入网易密码", trigger: "blur" }],
      },
    };
  },
  created() {},
  computed: {
      ...mapGetters(['isLogin','loginDialogVisible','userInfo']),
  },
  methods: {
      ...mapMutations(['setLogin','setuserInfo','setloginDialogVisible']),
    handleClose() {
      this.setloginDialogVisible(false)
    },
     submitForm() {
        this.$refs.ruleForm.validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
  },
};
</script>
<style lang="less" scoped>
/deep/.el-dialog__wrapper{
    width: 1519px;
}
.forminfo{
   width: 100%;
   .el-form{
      /deep/.el-form-item__content{
          margin: 0 !important;
      }
   }
}
</style>
